<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" http-equiv="Content-Type" content="text/html">
    <meta name="referrer" content="no-referrer"/>
    <title th:text="${questionDetails.title}"></title>

    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="/js/community.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <link rel="stylesheet" href="/css/community.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
</head>

<body>
<div th:insert="~{navigation :: nav}"></div>
<div class="container-fluid main profile">
    <div class="row">
        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
<!--            正文 -->
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h4><span class="glyphicon glyphicon-list-alt" aria-hidden="true"
                          th:text="${questionDetails.title}"></span>
                </h4>
                <span class="text-desc">
                作者: <span th:text="${questionDetails.user.name}"></span> |
                阅读数: <span th:text="${questionDetails.viewCount}"></span> |
                发布时间: <span th:text="${#dates.format(questionDetails.gmtCreate,'yyyy-MM-dd HH:mm')}"></span>
            </span>
                <hr>
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><span
                        th:text="${questionDetails.description}"></span>
                </div>
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <span class="label label-info" th:text="${questionDetails.tag}"></span>
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <a class="community-menu" th:href="@{'/publish/'+${questionDetails.id}}"
                   th:if="${session.user.id == questionDetails.creator}">
                    <span class="glyphicon glyphicon glyphicon-pencil"></span>编辑
                </a>
            </div>
            <!--            回复-->
            <h4>
                <span th:text="${questionDetails.commentCount}"></span> 个回复
            </h4>
            <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" th:each="comment: ${comments}">
                <div class="media">
                    <div class="media-left">
                        <img class="media-object img-circle" th:src="${comment.user.avatarUrl}">
                    </div>
                    <div class="media-body">
                        <span th:text="${comment.user.name}"></span>
                        <div th:text="${comment.content}">comments</div>

                        <div class="menu">
                            <span class="glyphicon glyphicon-thumbs-up icon"></span>
                            <!--       th:text="${comment.getCommentCount()}"                     <span class="glyphicon glyphicon-thumbs-down icon"></span>-->
                            <span class="glyphicon glyphicon-comment icon" th:data-id="${comment.id}"
                                  onclick="collapseComments(this)"></span>
                            <span class="pull-right">[[${#dates.format(comment.getGmtCreate(),'yyyy-MM-dd')}]]</span>
                        </div>

                        <!--二级评论-->
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 collapse sub-comments"
                             th:id="${'comment-'+comment.id}">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <input type="text" class="form-control" placeholder="发言咯~~ (手动笑脸)"
                                       th:id="${'input-'+comment.id}">
                                <button type="button" class="btn btn-success pull-right" onclick="comment(this)"
                                        th:data-id="${comment.id}">吐槽
                                </button>
                            </div>
                        </div>

                    </div>
                </div>


            </div>

            <!--            回复输入框-->
            <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="comment_section">
                <input type="hidden" id="question_id" th:value="${questionDetails.id}">
                <input type="hidden" id="commentator" th:value="${session.user != null ? session.user.getId() : '0'}">
                <textarea class="form-control comment" rows="3" id="comment_content"></textarea>
                <button type="button" class="btn btn-success comment-btn" onclick="post()">回复</button>
            </div>
        </div>
        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h4>发起人</h4>
                <div class="media">
                    <div class="media-left">
                        <img class="media-object img-circle" th:src="${questionDetails.user.avatarUrl}">
                    </div>
                    <div class="media-body">
                        <span th:text="${questionDetails.user.name}"></span>
                    </div>
                </div>
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h4>相关问题</h4>
            </div>
        </div>
    </div>
</div>
</body>
</html>